import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-zero',
  templateUrl: './zero.component.html',
  styleUrls: ['./zero.component.css'],
})
export class ZeroComponent {
  count: number = 0;
  // 将mySpan1通过#mySpan绑定至视图中的元素
  // mySpan1是变量名可以随意
  @ViewChild('mySpan') mySpan1: any = null;
  @ViewChild('pinkCpn') pinkCpn: any = null;

  btnClick() {
    this.count++;
  }
  deleteClick: Function = () => {
    this.count--;
    console.log(this);
  };
  parmasEventHandler(e: any) {
    console.log('此e为angular自定义事件的参数', e);
  }
  printRef() {
    console.log('引用原生DOM',this.mySpan1);
    console.log('引用子组件', this.pinkCpn);
    // 调用子组件的方法
    this.pinkCpn.propsClick()
  }
  // 5.在这个生命周期函数后可以拿到ref
  ngAfterViewInit() {
    console.log('组件ngAfterViewInit');
    console.log('组件ngAfterViewInit引用原生DOM',this.mySpan1);
    console.log('组件ngAfterViewInit引用子组件', this.pinkCpn);
  }
}
